<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
    <link href="../css/common.css" rel="stylesheet" type="text/css" />
    <title>Onsite verification statement</title>
    <style>
        body {
            overflow-x: hidden;
            font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
            font-weight: normal;
            line-height: 1.5;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: #f8f8f8;
            margin: 0px;
        }
        
        .container {
            display: block;
        }
        
        .pic {
            width: 100%;
            height: 117px;
        }
        
        .title {
            margin-left: 10px;
            width: auto;
            height: auto;
            font-size: 18px;
            font-weight: bold;
            line-height: 20px;
            color: #015170;
        }
        
        .yinyong {
            margin-top: 6px;
            margin-left: 10px;
            margin-right: 10px;
            width: auto;
            height: auto;
            font-size: 15px;
            line-height: 20px;
            color: #444444;
        }
        
        .mafan {
            margin: 10px;
            width: auto;
            height: auto;
            font-weight: bold;
            font-size: 15px;
            color: #444444;
        }
        
        .normal {
            margin: 10px;
            width: auto;
            height: auto;
            font-size: 15px;
            line-height: 20px;
            color: #444444;
        }
        
        .tip {
            color: #E94242;
        }
        
        .choice {
            margin-left: 34px;
            position: relative;
            /*display: flex;*/
        }
        
        .choice .radio {
            position: relative;
            display: block;
            font-weight: 400;
            color: #444444;
            padding-left: 25px;
            cursor: pointer;
            /*text-align: center;*/
        }
        
        .choice .radio input {
            position: absolute;
            left: -9999px;
        }
        
        .choice .radio i {
            display: block;
            position: absolute;
            top: 6px;
            left: 0;
            width: 15px;
            height: 15px;
            outline: 0;
            border: 1px solid #ccc;
            background: #eee;
            border-radius: 50%;
            transition: border-color .3s;
            -webkit-transition: border-color .3s;
        }
        
        .choice .radio input:checked+i {
            border-color: #eee;
        }
        
        .choice .radio input+i:after {
            position: absolute;
            content: '';
            top: 0px;
            left: 0px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            /* background-color: #47a8c0; */
            background: url("../images/btn_checkbox_sel@2x.png") no-repeat;
            background-size: cover;
            opacity: 0;
            /* transition: opacity .1s;
                     -webkit-transition: opacity .1s; */
        }
        
        .choice .radio input:checked+i:after {
            opacity: 1;
        }
        
        .bottomBar {
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: #ffffff;
        }
        input[type="image"] {
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            -webkit-appearance: none;
            outline: none;
            border: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="pic" src="../images/pic@2x.png" />
    </div>
    <div class="title">Onsite verification statement</div>
    <div class="yinyong"><i>under the Renewable Energy (Electricity) Regulations 2001</i></div>
    <div class="mafan">This onsite verification statement must be signed by the owner of a small generation unit (solar, wind or hydro system) to verify that the accredited installer or supervisor physically attended the installation made in their name.
    </div>
    <div class="normal" style="font-weight: 400;">
        In order for your small generation unit to be eligible for small-scale technology certificates, all installers must be accredited by the Clean Energy Council, in addition to meeting other requirements as prescribed under the Renewable Energy (Electricity)
        Act 2000.
    </div>
    <div class="normal" style="font-weight: 400;">
        An accredited supervisor is defined as a person accredited by the Clean Energy Council who has undertaken the installation, or supervised the installation. This may include job set up, mid installation check-up, testing and commissioning.
    </div>
    <div class="normal">By signing below, the signatory declares that:</div>
    <!-- 绿色的点 -->
    <div style="display: flex">
        <div class="greenDot">
        </div>
        <div style="margin-left: 6px;font-size: 15px">I am the owner of the small generation unit installed at:
        </div>
    </div>
    <div class="normal" style="margin-left: 24px">
        Physical address:
        <strong id="address">
        </strong>
    </div>
    <div class="normal" style="margin-left: 24px">
        Suburb/city:
        <strong id="addressUnit1">
        </strong>
    </div>
    <div class="normal" style="margin-left: 24px">
        State/territory:
        <strong id="addressUnit2">
        </strong>
    </div>
    <div class="normal" style="margin-left: 24px">
        Postcode:
        <strong id="addressUnit3">
        </strong>
    </div>
    <div style="display: flex">
        <div class="greenDot">
        </div>
        <div style="margin-left: 6px;font-size: 15px;width: 292px;">I confirm that the accredited installer or supervisor specified has either (<a id="tip_msg">Please
                select</a>):</div>
    </div>
    <!-- 单选 -->
    <div class="choice">
        <label class="radio">Physically attended and undertaken
            the installation themselves, or <input class="red-input" type="radio" name="radio" value="1" onchange="onSwitch('undertaken the installation themselves')"><i></i></label>
        <label class="radio">Physically attended and supervised
            the installation by others.<input class="red-input" type="radio" value="2" name="radio" onchange="onSwitch('supervised the installation by others')"><i></i></label>
    </div>
    <!-- 底部斜体部分 -->
    <div class="yinyong">
        <i>I understand that under the penalties apply for providing false or misleading information.</i>
    </div>
    <!-- 粗体 -->
    <div class="mafan" style="margin-top: 10px;">To aid proof of identity, this application will take a photo of you as you sign and agree to the stated terms.
    </div>
    <div class="mafan" style="margin-top: 10px;">
        I authorise and appoint One Stop Warehouse Finance as my agent to make any updates to this form which are required to allow for it to be duly processed.
    </div>
    <div style="height: 64px;"></div>
    <div class="bottomBar">
        <div class="summitDiv">
            <button type="button" class ="summitButton" onclick="submit()">I Agree & Continue</button>
<!--                <input type="image" src="../images/btn_i_agree_continue.png" style="width: 164px;height: 64px;" onclick="submit()" />-->
        </div>
    </div>
    </div>
    <script type="text/javascript" src="../javascripts/platform.js"></script>
    <script type="text/javascript">
        var agreeStr

        function onSwitch(value) {
            agreeStr = value;
            let tipMsg = document.getElementById("tip_msg");
            tipMsg.setAttribute("class", "");
        }

        function init_data(jsonData) {
            var address = jsonData.install_address.installation_address;
            var addressUnit1 = jsonData.install_address.suburb;
            var addressUnit2 = jsonData.install_address.state;
            var addressUnit3 = jsonData.install_address.post_code;
            document.getElementById("address").innerText = address;
            document.getElementById("addressUnit1").innerText = addressUnit1;
            document.getElementById("addressUnit2").innerText = addressUnit2;
            document.getElementById("addressUnit3").innerText = addressUnit3;
        }

        function add_input_params(jsonData) {
            let local = getLocalParam('inputparam');
            local['suburb'] = jsonData.install_address.suburb;
            local['state'] = jsonData.install_address.state;
            local['post_code'] = jsonData.install_address.post_code;
            local['installation_address'] = jsonData.install_address.installation_address;
            addParamToLocal('inputparam', local);
        }
        var data;

        function init_pvd_detail(detail) {
            data = detail;
            init_data(data);
            add_input_params(data);
        }

        let doc_version = "2";
        //提交按钮
        function submit() {

            //请选择
            if (agreeStr == null) {
                let tipMsg = document.getElementById("tip_msg");
                tipMsg.scrollIntoView();
                tipMsg.setAttribute("class", "tip");
                return
            }

            let localInputParam = getLocalParam('inputparam');
            let local = getLocalParam('param');
            local["physically_attended"] = agreeStr;
            local["statement_input_param_all"] = JSON.stringify(localInputParam);
            local["owner_onsite_statement_version"] = doc_version;
            addParamToLocal('param', local)
            if (data.is_aus_solar_co) {
                //asc satisfactory
                window.location.href = "./aus/asc_satisfactory_form_v1.html";
            } else {
                //跳转到签名页面
                if (isAndroid) {
                    let json = JSON.stringify(local)
                    myJsBridge.submit(json)
                }
                if (isIos) {
                    window.webkit.messageHandlers.WebViewEvent.postMessage(local);
                }
            }
        }
        function getLocalParam(paramName) {
            var local = localStorage.getItem(paramName);
            if (local != "" && local != null && local != undefined) {
                console.log(local)
                return JSON.parse(local);
            } else {
                return {};
            }
        }

        function addParamToLocal(paramName, dictionary) {
            localStorage.setItem(paramName, JSON.stringify(dictionary));
        }

        if (isAndroid) {
            let json = myJsBridge.initData();
            init_pvd_detail(JSON.parse(json));
        }

        if (isIos) {
            window.webkit.messageHandlers.event.postMessage({
                "event": "getPvddetail"
            });
        }
    </script>
</body>

</html>
